<template>
    <div class="chat-container text-light" data-bs-theme="dark" style="border-radius: 10px;background-color: #000;user-select:text;">
        <div style="flex: 1"></div>
        <div class="cot">
            <div class="messages" ref="messages">
                <div>
                    <div style="width: 100%;text-align: left">
                        <div class="content-card">
                            <div style="display: inline-block;margin-right: 10px"
                                :style="{ 'filter': 0 !== messages.length ? 'grayscale(100%)' : '', 'opacity': 0 !== messages.length ? 0.5 : 1 }">
                                <lottie :loop="messages.length === 0" :width="40" :height="40"
                                    :options="{ animationData: robotJSONData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice' } }" />
                            </div>
                            <div class="text">
                                <h2 style="font-weight: bold">你好，我是AVA问答助手</h2>
                                <div style="font-size: 0.8rem;color: rgba(255,255,255,0.8)">
                                    <div class="tags">
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #00a9c7">语言</div>
                                            <div class="t-value" style="background-color: rgba(0,169,199,0.8)">python
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #119a64">web框架</div>
                                            <div class="t-value" style="background-color: rgba(17,154,100,0.9)">fastapi
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #9a44ff">模型框架</div>
                                            <div class="t-value" style="background-color: rgba(154,68,255,0.8)">
                                                langchain</div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #00b3dc">推理模型</div>
                                            <div class="t-value" style="background-color: rgba(0,179,220,0.8)">
                                                DeepSpeek-chat</div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #ff742a">向量数据库</div>
                                            <div class="t-value" style="background-color: rgba(255,116,42,0.8)">chroma
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #c03e3e">句子转换器模型</div>
                                            <div class="t-value" style="background-color: rgba(192,62,62,0.8)">
                                                all-MiniLM-L6-v2</div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #249bb0">爬虫框架</div>
                                            <div class="t-value" style="background-color:rgba(36,155,176,0.8)">jvppeteer
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #00bd8b">前端框架</div>
                                            <div class="t-value" style="background-color: rgba(0,189,139,0.9)">vue3
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <div class="t-label" style="background-color: #c236bf">前端样式</div>
                                            <div class="t-value" style="background-color: rgba(194,54,191,0.9)">
                                                bootstrap</div>
                                        </div>
                                    </div>
                                    <div>
                                        我可以为你解答禅道需求与bug解决方案，查找解释239相关文章，全连接、高校等项目文档解释，甚至闲聊、逗趣、答疑解惑...
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="helper-card">
                                        <div class="form-check form-switch"
                                            style="display: flex;align-items: center;text-align: left;padding-left: 0">
                                            <img src="@/assets/svg/doc.svg" style="height: 1.6rem;width: 1.6rem" alt="">
                                            <label class="form-check-label"
                                                for="flexSwitchCheckDefault">检索239文章、开发文档</label>
                                            <input class="form-check-input" type="checkbox" role="switch"
                                                id="flexSwitchCheckDefault" style="font-size: 1.2rem;cursor: pointer"
                                                v-model="withDoc">
                                        </div>
                                        <div class="sub-title">
                                            <div>
                                                拉取了239文章、项目全连接和高校开发文档，让大老们写的文档不再吃灰。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="helper-card">
                                        <div class="form-check form-switch"
                                            style="display: flex;align-items: center;text-align: left;padding-left: 0">
                                            <img src="@/assets/svg/cd.svg" style="height: 1.6rem;width: 1.6rem" alt="">
                                            <label class="form-check-label" for="flexSwitchCheckDefault">检索禅道</label>
                                            <input class="form-check-input" type="checkbox" role="switch"
                                                id="flexSwitchCheckDefault" style="font-size: 1.2rem;cursor: pointer"
                                                v-model="withCd">
                                        </div>
                                        <div class="sub-title">
                                            <div>
                                                系统拉取了所有禅道需求与bug，开启后会检索相关内容进行解答。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex">
                                    <div class="helper-card" @click="ct()">
                                        <div class="form-check form-switch"
                                            style="display: flex;align-items: center;text-align: left;padding-left: 0">
                                            <img src="@/assets/svg/question.svg" style="height: 1.6rem;width: 1.6rem"
                                                alt="">
                                            <label class="form-check-label">出题助手</label>
                                        </div>
                                        <div class="sub-title">
                                            <div>
                                                根据所提供的教材资料，让Ai模拟教师出题，不再频繁翻阅教材，提升出题效率。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="helper-card" @click="videoList(false)">
                                        <div class="form-check form-switch"
                                            style="display: flex;align-items: center;text-align: left;padding-left: 0">
                                            <img src="@/assets/svg/video.svg" style="height: 1.6rem;width: 1.6rem"
                                                alt="">
                                            <label class="form-check-label">课堂总结</label>
                                        </div>
                                        <div class="sub-title">
                                            <div>
                                                总结教师课堂表现、学生上课状态，结合语音转写，录播AI数据进行分析总结。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-for="(message, index) in messages" :key="message.id" class="message">
                    <div v-if="message.role === 'user'" style="width: 100%;text-align: right">
                        <div class="content-card">
                            <div class="text" style="text-align: left" v-html="renderMd(message.content)"></div>
                            <div style="display: inline-block;margin-left: 10px">
                                <img src="@/assets/user.png" class="rounded mx-auto d-block" alt="..."
                                    style="width: 40px;height: 40px">
                            </div>
                        </div>
                    </div>
                    <div v-if="message.role === 'system'" style="width: 100%;text-align: left">
                        <div class="content-card">
                            <div style="display: inline-block;margin-right: 10px"
                                :style="{ 'filter': index !== messages.length - 1 ? 'grayscale(100%)' : '', 'opacity': index === messages.length - 1 ? 1 : 0.5 }">
                                <lottie :loop="index === messages.length - 1" :width="40" :height="40"
                                    :options="{ animationData: robotJSONData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice' } }" />
                            </div>
                            <div class="text" v-if="!message.content">
                                <lottie style="margin-left: -6px;margin-top: -4px;margin-bottom: 2px;" :height="20"
                                    :options="{ animationData: loadingJSONData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice' } }" />
                            </div>
                            <div v-else style="max-width: calc(100% - 30px);overflow: auto">
                                <div class="text" v-if="message.type === 'msg'">
                                    <div v-html="renderMd(message.content)"></div>
                                    <div v-if="message.tag === 'build-question' && !onAnswer && index === messages.length - 1"
                                        style="text-align: right">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            @click="ctByDoc(docShow, true)"
                                            style="--bs-btn-padding-y: 0; --bs-btn-padding-x: 8px; --bs-btn-font-size: .7rem;">
                                            <span style="display: flex;align-items: center">
                                                <span>
                                                    再来一题
                                                </span>
                                                <i class="fa fa-solid fa-arrow-rotate-right" />
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="text" v-if="message.type === 'video-list'">
                                    <div style="font-weight: bold;margin-bottom: 10px">选择一个点播课堂进行总结吧</div>
                                    <div class="video-list">
                                        <div v-for="(item, index) in message.content" :key="index" class="video-item"
                                            @click="analysisVideo(item)">
                                            <div>【{{ item.targetName }}】<span style="color: #999">开课学校：{{
                                    item.schoolName }}</span></div>
                                        </div>
                                    </div>
                                    <div style="text-align: right;" v-if="index === messages.length - 1">
                                        <div class="btn-group-sm" role="group" aria-label="Basic example">
                                            <button type="button" class="btn btn-primary"
                                                :disabled="videoListForm.pageIndex === 1"
                                                @click="videoListChange(-1)">上一页
                                            </button>
                                            <button type="button" class="btn btn-primary"
                                                :disabled="videoListForm.pageIndex === videoListForm.pageCount"
                                                @click="videoListChange(1)">
                                                下一页
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="text" v-if="message.type === 'ct'">
                                    <div style="font-weight: bold;margin-bottom: 10px">选着一份教材来出题吧</div>
                                    <div class="video-list">
                                        <div v-for="(item, index) in message.content" :key="index" class="video-item"
                                            @click="ctByDoc(item)">
                                            <div style="display: flex;align-items: center">
                                                <div style="flex: 1">【{{ item.name }}】</div>
                                                <i class="fa fa-regular fa-eye" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="!chatWithJobs"
                style="margin-top: 20px;display: flex;align-items: center;color: #ffffff;line-height: 1.2rem;font-size: 0.9rem">
                <div>检索239文章、开发文档</div>
                <div style="width: 4px"></div>
                <input class="form-check-input" type="checkbox" role="switch"
                    style="font-size: 1.2rem;cursor: pointer;margin-top: 0" v-model="withDoc">
                <div style="width: 20px"></div>
                <div>检索禅道</div>
                <div style="width: 4px"></div>
                <input class="form-check-input" type="checkbox" role="switch"
                    style="font-size: 1.2rem;cursor: pointer;margin-top: 0" v-model="withCd">
            </div>
            <div v-else
                style="margin-top: 20px;display: flex;align-items: center;color: #ffffff;line-height: 1.2rem;font-size: 0.9rem">
                <div>工作计划问答</div>
                <div style="width: 4px"></div>
                <input class="form-check-input" type="checkbox" role="switch" v-model="chatWithJobs"
                    style="font-size: 1.2rem;cursor: pointer;margin-top: 0" checked>
            </div>
            <div class="bottom" style="margin-top: 8px">
                <textarea id="input-text-area" ref="inputTextArea" class="form-control input" aria-label="With textarea"
                    v-model="inputMessage" @keyup.enter="send" :disabled="onAnswer"
                    :placeholder="onAnswer ? '正在回答...' : '开始提问'"></textarea>
                <div v-if="onAnswer" class="send" style="width: 2rem; height: 2rem;opacity: 0.2">
                    <div class="spinner-grow " style="width: 100%; height: 100%;" role="status">
                        <span class="visually-hidden"></span>
                    </div>
                </div>
                <i v-if="!onAnswer" class="send fa fa-solid fa-paper-plane" @click="send" />
            </div>
            <div style="margin: 6px;color: #7d7d7d;text-align: center">power by ava-hzl</div>
        </div>
        <div style="flex: 1;margin: 40px;color: #bbbbbb">
            <div v-if="docShow" style="height: 100%;display: flex;flex-direction: column">
                <div style="font-weight: bold;color: #fff">参考资料</div>
                <div>{{ docShow.name }}</div>
                <p style="text-align: left;flex: 1;overflow: auto">{{ docShow.content }}</p>
            </div>
            <div v-else-if="withDocs" style="height: 100%;display: flex;flex-direction: column">
                <div style="font-weight: bold;color: #fff">参考资料</div>
                <div style="text-align: left;padding: 6px;" v-for="(item, index) in withDocs" :key="index">
                    <div v-if="item.url">
                        <span>{{ item.title.replace(/\\/g, '/') }}</span>
                        <br />
                        <a :href="item.url.replace(/\\/g, '/')" target="_blank">{{ item.url.replace(/\\/g,
                                    '/') }}</a>
                    </div>
                    <a href="#" v-else>{{ item.title.replace(/\\/g, '/') }}</a>
                </div>
            </div>
            <div v-else-if="chatWithJobs" style="height: 100%;display: flex;flex-direction: column">
                <div style="font-weight: bold;color: #fff">工作内容</div>
                <div style="text-align: left;padding: 6px;flex: 1;height: 0;overflow: auto;" v-html="chatWithJobs">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'vue-toastification/dist/index.css';
import 'bootstrap/dist/css/bootstrap.css'
import robotJSONData from '@/assets/robot.json';
import loadingJSONData from '@/assets/loading.json';
import doc from '@/assets/doc.json'
import Lottie from 'vue-lottie'
import { v4 as uuidv4 } from 'uuid';
import MarkdownIt from 'markdown-it'
import markdownItHighlightjs from 'markdown-it-highlightjs'
import 'highlight.js/styles/androidstudio.min.css';
const md = new MarkdownIt({ html: true, linkify: true })
md.use(markdownItHighlightjs, {
    // 可以在这里配置 highlight.js  
    // 例如，指定要使用的语言别名  
    // hljs: { /* ... */ }  
}).set({
    // markdown-it 选项  
})
export default {
    components: { Lottie },
    data() {
        return {
            url: "http://192.168.37.167:8008",
            // url: "http://192.168.23.110:8008",
            docs: doc,
            withDoc: true,
            withCd: false,
            chatWithJobs: "",
            messages: [],
            withDocs: false,
            sessionId: uuidv4(),
            inputMessage: '',
            robotJSONData: robotJSONData,
            loadingJSONData: loadingJSONData,
            onAnswer: false,
            docShow: "",
            videoListForm: {
                pageIndex: 1,
                pageCount: 10
            }
        };
    },
    activated() {
        if (this.$route.query.ask) {
            this.chatWithJobs = sessionStorage.getItem('chat-msg')
            this.withCd = false
            this.withDoc = false
            return
        }
        if (this.$route.query.msg) {
            let msg = sessionStorage.getItem('chat-msg')
            if (!msg) {
                return
            }
            let data = JSON.parse(msg)
            if (!data) {
                return
            }
            sessionStorage.setItem('chat-msg', "")
            if (this.onAnswer) {
                this.$toast.error('正在回复请稍后重试', {
                    position: 'top-right',
                    timeout: 3000,
                    closeButton: true,
                    // 你可以在这里覆盖全局配置  
                });
                return
            }
            this.docShow = false
            this.withDocs = false
            this.messages.push({
                content: data.title,
                role: "user",
                type: 'msg'
            })
            this.messages.push({
                content: "",
                role: "system",
                type: 'msg',
            })
            this.onAnswer = true
            this.onlyChat(data.content)
        }
    },
    mounted() {
        this.$refs.inputTextArea.oninput = () => {
            this.setAreaHeight()
        }
    },
    unmounted() {
    },
    methods: {
        ctByDoc(doc, re) {
            if (this.onAnswer) {
                return
            }
            this.docShow = doc
            this.withDocs = false
            this.messages.push({
                content: re ? "再来一题" : "请根据教材：【" + doc.name + "】出一道选择题",
                role: "user",
                type: 'msg'
            })
            this.messages.push({
                content: "",
                role: "system",
                type: 'msg',
                tag: 'build-question',
            })
            this.onAnswer = true
            this.onlyChat(`
          请根据教材内容出一道选择题，回答格式如下：
          题目：xxx
          选项：xxx
          - A：xxx
          - B：xxx
          - C：xxx
          - ...
          答案：xxx
          解析：xxx
          教材内容:${doc.content}
          `)
        },
        onlyChat(msg) {
            this.readChatbotReply(this.url + "/only-chat", {
                content: msg
            }, (first, msg, done) => {
                if (done) {
                    this.onAnswer = false
                } else {
                    this.messages[this.messages.length - 1].content += msg
                }
                this.scrollToBottom(true)
            })
            this.scrollToBottom()
        },
        ct() {
            if (this.onAnswer) {
                return
            }
            this.messages.push({
                content: this.docs,
                role: "system",
                type: 'ct'
            })
            this.scrollToBottom()
        },
        analysisVideo(video) {
            if (this.onAnswer) {
                return
            }
            this.docShow = false
            this.withDocs = false
            this.messages.push({
                content: "请分析点播：" + video.targetName,
                role: "user",
                type: 'msg'
            })
            this.messages.push({
                content: "",
                role: "system",
                type: 'msg'
            })
            this.onAnswer = true
            this.readChatbotReply(this.url + "/video-analysis?video_id=" + video.targetId, {}, (first, msg, done) => {
                if (done) {
                    this.onAnswer = false
                } else {
                    this.messages[this.messages.length - 1].content += msg
                }
                this.scrollToBottom(true)
            })
            this.scrollToBottom()
        },
        async videoListChange(changeV) {
            if (this.onAnswer) {
                return
            }
            if ((changeV < 0 && this.videoListForm.pageIndex === 1) || (changeV > 0 && this.videoListForm.pageIndex === this.videoListForm.pageCount)) {
                return
            }
            this.videoListForm.pageIndex += changeV
            await this.videoList(true)
        },
        async videoList(change) {
            if (this.onAnswer) {
                return
            }
            this.onAnswer = true
            await fetch(this.url + "/video-list", {
                method: 'POST',
                timeout: 15000,
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                },
                body: JSON.stringify({
                    "pageIndex": this.videoListForm.pageIndex,
                    "pageSize": 10,
                    "orderType": 0,
                })
            }).then(response => {
                if (!response.ok) {
                    this.onAnswer = false
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 如果服务器响应成功，我们可以返回响应的JSON
                return response.json();
            }).then(r => {
                this.onAnswer = false
                let data = JSON.parse(r)
                this.videoListForm.pageCount = data.pageCount
                if (!data.success) {
                    this.$toast.error(data.message, {
                        position: 'top-right',
                        timeout: 3000,
                        closeButton: true,
                        // 你可以在这里覆盖全局配置  
                    });
                    return
                }
                if (change) {
                    this.messages[this.messages.length - 1] = {
                        role: "system",
                        content: data.data.content,
                        type: "video-list"
                    }
                } else {
                    this.messages.push({
                        role: "system",
                        content: data.data.content,
                        type: "video-list"
                    })
                }
                this.scrollToBottom()
            });
        },
        /***
         * http请求(流式响应处理)
         * @param data
         * @param func
         * @returns {Promise<void>}
         */
        async readChatbotReply(url, data = {}, func) {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'Session-ID': this.sessionId,
                },
                timeout: 15000,
                body: JSON.stringify(data)
            });

            const readableStream = response.body;
            if (readableStream) {
                const reader = readableStream.getReader();
                let first = true
                // eslint-disable-next-line no-constant-condition
                while (true) {
                    const { value, done } = await reader.read();
                    if (done) {
                        func(first, "", true)
                        break;
                    }
                    const chunkValue = new TextDecoder().decode(value);
                    if (chunkValue.indexOf("--with-doc--start") > -1 && chunkValue.indexOf("--with-doc--end") > -1) {
                        this.withDocs = JSON.parse(chunkValue.split("--with-doc--start")[1].split("--with-doc--end")[0])
                    } else {
                        func(first, chunkValue)
                        first = false
                    }
                }
                // Stream fully consumed
                reader.releaseLock();
            }
        },
        renderMd(text) {
            return md.render(text)
        },
        setAreaHeight() {
            this.$refs.inputTextArea.style.height = 'auto'
            let contentHeight = this.$refs.inputTextArea.scrollHeight
            if (contentHeight > 300) {
                this.$refs.inputTextArea.style.height = 300 + "px"
            } else {
                this.$refs.inputTextArea.style.height = contentHeight + "px"
            }
        },
        // 发送消息给被连接的服务端
        send() {
            if (this.inputMessage.trim() === '') {
                return;
            }
            if (this.onAnswer) {
                this.$toast.error('正在回复请稍后重试', {
                    position: 'top-right',
                    timeout: 3000,
                    closeButton: true,
                    // 你可以在这里覆盖全局配置  
                });
                return
            }

            this.docShow = false
            this.withDocs = false
            this.onAnswer = true
            this.messages.push({
                content: this.inputMessage.trim().replaceAll("\n", "<br>"),
                role: "user",
                type: 'msg'
            })
            // let json = JSON.stringify(this.messages)
            this.messages.push({
                content: "",
                role: "system",
                type: 'msg'
            })
            if (this.chatWithJobs) {
                let msg = `
                ${this.chatWithJobs}
                以上是我的工作内容，请根据工作内容回答我问题：${this.inputMessage}
                `
                this.onlyChat(msg)
            } else {
                this.readChatbotReply(this.url + "/chat", {
                    content: this.inputMessage.trim(),
                    withCd: this.withCd,
                    withDoc: this.withDoc,
                    temperature: 0.5
                }, (first, msg, done) => {
                    if (done) {
                        this.onAnswer = false
                    } else {
                        this.messages[this.messages.length - 1].content += msg
                    }
                    this.scrollToBottom(true)
                })
            }
            this.inputMessage = ""
            this.$refs.inputTextArea.style.height = "60px"
            this.scrollToBottom()
        },
        scrollToBottom(auto) {
            if (auto) {
                // 计算元素滚动到底部时的scrollTop值
                let scrollBottom = this.$refs.messages.scrollHeight - this.$refs.messages.clientHeight;
                // 获取当前滚动位置
                let scrollTop = this.$refs.messages.scrollTop || this.$refs.messages.pageYOffset;
                // 如果接近或等于底部，返回true
                // 注意：有时由于精度问题或浏览器渲染差异，可能需要一个小的缓冲值
                let threshold = 10; // 可以根据需要调整这个阈值
                if (!scrollTop || scrollTop + threshold >= scrollBottom) {
                    this.$nextTick(() => {
                        this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight;
                    })
                }
            } else {
                this.$nextTick(() => {
                    this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight;
                })
            }
        },
    }
};
</script>

<style lang="less">
.chat-container {
    display: flex;
    margin: 0 auto;
    height: 100%;

    .cot {
        height: 100%;
        flex: 10;
        display: flex;
        flex-direction: column;
        max-width: 800px;
    }

    .tags {
        color: #ffffff;

        .tag {
            border-radius: 2px;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            font-size: 11px;

            .t-label {
                margin: 0;
                padding: 1px 3px 1px 6px;
            }

            .t-value {
                margin: 0;
                padding: 1px 6px 1px 3px;
            }
        }
    }


    .helper-card:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .helper-card {
        flex: 1;
        transition: all 0.1s linear;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 10px;
        border-radius: 10px;
        color: rgba(255, 255, 255, 1);

        .sub-title {
            opacity: 0.9;
            font-size: 0.8rem;
        }
    }
}

.messages::-webkit-scrollbar {
    display: none;
}

.messages {
    margin-top: 30px;
    flex: 1;
    height: 0;
    overflow-y: auto;

    .content-card {
        margin-top: 20px;
        max-width: 90%;
        color: #fff;
        display: inline-flex;
        align-items: start;

        .text {
            word-break: break-all;
            background: rgb(48, 53, 58);
            padding: 0 10px;
            border: 10px rgb(48, 53, 58) solid;
            box-sizing: border-box;
            flex: 1;
            display: grid;
            border-radius: 10px;
            max-width: 100%;
            overflow: auto;

            * {
                margin: 4px;
            }

            h1,
            h2,
            h3,
            h4 {
                font-size: 18px;
            }
        }

        .video-list {
            font-size: 14px;

            .video-item:hover {
                background-color: rgba(255, 255, 255, 0.2);
            }

            .video-item {
                cursor: pointer;
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                padding: 8px 10px;
            }
        }
    }
}


.bottom {
    background: #495057;
    border-radius: 10px;
    margin: 20px 0;
    margin-bottom: 0;
    display: flex;
    align-items: end;
    position: relative;

    .input::-webkit-scrollbar {
        display: none;
    }

    .input {
        width: 0;
        flex: 1;
        resize: none;
        height: 60px;
    }

    .send:hover {
        color: #4ea3ff;
    }

    .send {
        position: absolute;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        width: 20px;
        font-size: 20px;
        color: #d3d3d3;
    }
}


pre {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background-color: rgb(40, 43, 46) !important;
    overflow-x: auto;
}
</style>